<template>
  <dv-border-box-10 :color="['#50649a', '#50649b']">
    <ul id="main">
      <li
        v-for="(item, index) in circleData"
        :key="index"
        :class="{ active: item.is_latest_sign_user }"
      >
        <div>
          <span>{{ item.nick_name }}</span>
        </div>
      </li>
    </ul></dv-border-box-10
  >
</template>

<script>
export default {
  data() {
    return {
      circleData: [
        {
          // id: "1",
          nick_name: "勤奋",
          is_latest_sign_user: true,
          gender: 0,
        },
        {
          nick_name: "自律",
          is_latest_sign_user: true,
          gender: 0,
        },
        {
          nick_name: "积极",
          is_latest_sign_user: true,
          gender: 0,
        },
        {
          nick_name: "努力",
          is_latest_sign_user: true,
          gender: 0,
        },
        {
          // id: "1",
          nick_name: "友善",
          is_latest_sign_user: true,
          gender: 0,
        },
        {
          nick_name: "好学",
          is_latest_sign_user: true,
          gender: 0,
        },
        {
          nick_name: "刻苦",
          is_latest_sign_user: true,
          gender: 0,
        },
      ],
      circleDom: [],
      circleArr: [],
      maxW: 0,
      maxH: 0,
      timer: null,
      timerArr: [],
      count: 0,
    };
  },
  mounted() {
    this.initBubble();
  },
  methods: {
    initBubble() {
      let main = document.getElementById("main");
      let divDom = main.getElementsByClassName("active");

      //清理每个球的定时器
      this.timerArr.forEach((item) => {
        clearInterval(item);
      });
      this.timerArr = [];

      //给新增加的dom设置宽高
      for (let i = 0; i < divDom.length; i++) {
        let colors = ["#0087ff", "#0080c5"];
        divDom[i].style.boxShadow =
          "0 0 20px" + " " + colors[this.circleData[i].gender] + " " + "inset";
        divDom[i].style.width = "3rem";
        divDom[i].style.height = "3rem";
        divDom[i].style.fontSize = "。6rem";
        divDom[i].style.lineHeight = "3rem";
        this.circleDom.push(divDom[i]);
      }

      //根据浏览器窗口的大小自动调节小球的运动空间
      window.onresize = () => {
        this.maxW = main.clientWidth - divDom[0].clientWidth;
        this.maxH = main.clientHeight - divDom[0].clientHeight;
      };
      onresize();

      //数组对象的初始化
      for (let i = 0; i < this.circleDom.length; i++) {
        let obj = {};
        if (this.circleDom[i].getAttribute("class") === "active") {
          obj.x = Math.floor(Math.random() * (this.maxW + 1));
          obj.y = Math.floor(Math.random() * (this.maxH + 1));
          obj.cx = obj.x + this.circleDom[0].offsetWidth / 2;
          obj.cy = obj.y + this.circleDom[0].offsetHeight / 2;
          obj.movex = Math.floor(Math.random() * 2);
          obj.movey = Math.floor(Math.random() * 2);
          obj.speed = 0.2;
          obj.timer = null;
          obj.index = i;
          this.circleArr.push(obj);
          this.circleDom[i].style.left = obj.x + "px";
          this.circleDom[i].style.top = obj.y + "px";
        } else {
          obj = this.circleArr[i];
        }
        this.move(obj);
      }
    },

    move(balls) {
      balls.timer = setInterval(() => {
        if (balls.movex === 1) {
          balls.x += balls.speed;
          if (balls.x + balls.speed >= this.maxW) {
            balls.x = this.maxW;
            balls.movex = 0;
          }
        } else {
          balls.x -= balls.speed;
          if (balls.x - balls.speed <= 0) {
            balls.x = 0;
            balls.movex = 1;
          }
        }
        if (balls.movey === 1) {
          balls.y += balls.speed;
          if (balls.y + balls.speed >= this.maxH) {
            balls.y = this.maxH;
            balls.movey = 0;
          }
        } else {
          balls.y -= balls.speed;
          if (balls.y - balls.speed <= 0) {
            balls.y = 0;
            balls.movey = 1;
          }
        }
        if (this.circleDom[balls.index]) {
          balls.cx = balls.x + this.circleDom[0].offsetWidth / 2;
          balls.cy = balls.y + this.circleDom[0].offsetHeight / 2;
          this.circleDom[balls.index].style.left = balls.x + "px";
          this.circleDom[balls.index].style.top = balls.y + "px";
          this.crash(balls.index);
        }
      }, 25);
      this.timerArr.push(balls.timer);
    },

    crash(a) {
      let container = [...this.circleArr];
      let ball1x = container[a].cx;
      let ball1y = container[a].cy;
      for (let i = 0; i < container.length; i++) {
        if (i !== a) {
          let ball2x = container[i].cx;
          let ball2y = container[i].cy;
          let distence = Math.sqrt(
            (ball1x - ball2x) * (ball1x - ball2x) +
              (ball1y - ball2y) * (ball1y - ball2y)
          );
          if (distence <= this.circleDom[0].offsetWidth) {
            if (ball1x > ball2x) {
              if (ball1y > ball2y) {
                container[a].movex = 1;
                container[a].movey = 1;
              } else if (ball1y < ball2y) {
                container[a].movex = 1;
                container[a].movey = 0;
              } else {
                container[a].movex = 1;
              }
            } else if (ball1x < ball2x) {
              if (ball1y > ball2y) {
                container[a].movex = 0;
                container[a].movey = 0;
              } else if (ball1y < ball2y) {
                container[a].movex = 0;
                container[a].movey = 1;
              } else {
                container[a].movex = 0;
              }
            } else {
              if (ball1y > ball2y) {
                container[a].movey = 1;
              } else if (ball1y < ball2y) {
                container[a].movey = 0;
              }
            }
          }
        }
      }
    },
  },
  beforeDestroy() {
    this.timerArr.forEach((item) => {
      clearInterval(item);
    });
  },
};
</script>

<style lang='less' scoped>
#main {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
  border: 1px transparent;
  box-sizing: border-box;
  li {
    position: absolute;
    overflow: hidden;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    &.active {
      animation: scaleBox 1s 1;
    }

    @keyframes scaleBox {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
      }
    }

    div {
      span {
        display: block;
        width: 100%;
        color: #fff;
        text-align: center;
      }
    }
  }
}
</style>
